<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=536918" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">版本更新</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">产品</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">树型</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">业态树</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">云</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">升级公告</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">云上传</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">网络系统</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">导出图片</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">打开文件</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">资源监控</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">另存为</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">导出excel</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">导出/输入</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">固件升级</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">关联断开</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">测试</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">更新</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">诊断</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">云下载</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">连接</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">关闭文件夹</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">更新</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">number_6</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77c;</span>
                <div class="name">number_7</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">number_9</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">number_0</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77f;</span>
                <div class="name">number_3</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
                <div class="name">number_1</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe781;</span>
                <div class="name">number_4</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">number_8</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe783;</span>
                <div class="name">number_punctuation</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">number_5</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">number_2</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe931;</span>
                <div class="name">add-r</div>
                <div class="code-name">&amp;#xe931;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe932;</span>
                <div class="name">add-s</div>
                <div class="code-name">&amp;#xe932;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe933;</span>
                <div class="name">ascending</div>
                <div class="code-name">&amp;#xe933;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe934;</span>
                <div class="name">air</div>
                <div class="code-name">&amp;#xe934;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe936;</span>
                <div class="name">building</div>
                <div class="code-name">&amp;#xe936;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe93a;</span>
                <div class="name">Chinese</div>
                <div class="code-name">&amp;#xe93a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe941;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe941;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe942;</span>
                <div class="name">descending</div>
                <div class="code-name">&amp;#xe942;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe945;</span>
                <div class="name">English</div>
                <div class="code-name">&amp;#xe945;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe94a;</span>
                <div class="name">exit-fullscreen</div>
                <div class="code-name">&amp;#xe94a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe94e;</span>
                <div class="name">fullscreen</div>
                <div class="code-name">&amp;#xe94e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe957;</span>
                <div class="name">lefy-exchange</div>
                <div class="code-name">&amp;#xe957;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96d;</span>
                <div class="name">right-exchange</div>
                <div class="code-name">&amp;#xe96d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe981;</span>
                <div class="name">view-list</div>
                <div class="code-name">&amp;#xe981;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe982;</span>
                <div class="name">view-matrix</div>
                <div class="code-name">&amp;#xe982;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe984;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe984;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe997;</span>
                <div class="name">diamond-o</div>
                <div class="code-name">&amp;#xe997;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe998;</span>
                <div class="name">dollar-o</div>
                <div class="code-name">&amp;#xe998;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">传输</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">云数据库</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">数据库</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">fpga云服务器</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">Redis 数据库</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">传输</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">在线</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9fb;</span>
                <div class="name">设备类_半球离线</div>
                <div class="code-name">&amp;#xe9fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe786;</span>
                <div class="name">离线</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">项目1</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">离线</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">列表项目</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">在线</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">在线</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">电脑申请</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">用户离线</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">手机电话</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">状态-开机</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">回收</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">编辑完成</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">工业品</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">GPRS</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">曲线</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">wxb报表</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">wxb工具</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">wxb主页</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">iconfont-xiugai</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">开机</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">iconfont-youhuiquan</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">iconfont-xingxing</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">iconfont-mingpian</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">工业</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">电机</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">机电检查</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">favorite</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">good</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">account</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">up</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">cry</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">skip</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">attachment</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">browse</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">bad</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">工业</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">ok</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">回收</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">状态-成功</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">状态-警告</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">ok</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">回收</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">电机</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">编辑完成</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">曲线</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">曲线</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">状态-拒绝</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">gprs</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">家</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">开机</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">停止</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">家庭</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">翻页</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">翻页</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">停止2</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">停止2</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">状态</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">ok (1)</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">状态</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">监控</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">翻页-上页</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">翻页-下页</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">电视机开关</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-banbengengxin"></span>
            <div class="name">
              版本更新
            </div>
            <div class="code-name">.icon-banbengengxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibiaoti35"></span>
            <div class="name">
              产品
            </div>
            <div class="code-name">.icon-weibiaoti35
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuliebiao"></span>
            <div class="name">
              树型
            </div>
            <div class="code-name">.icon-shuliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yetaishu"></span>
            <div class="name">
              业态树
            </div>
            <div class="code-name">.icon-yetaishu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yun"></span>
            <div class="name">
              云
            </div>
            <div class="code-name">.icon-yun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengjigonggao"></span>
            <div class="name">
              升级公告
            </div>
            <div class="code-name">.icon-shengjigonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji-copy"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunshangchuan"></span>
            <div class="name">
              云上传
            </div>
            <div class="code-name">.icon-yunshangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangluoxitong"></span>
            <div class="name">
              网络系统
            </div>
            <div class="code-name">.icon-wangluoxitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochutupian"></span>
            <div class="name">
              导出图片
            </div>
            <div class="code-name">.icon-daochutupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dakaiwenjian"></span>
            <div class="name">
              打开文件
            </div>
            <div class="code-name">.icon-dakaiwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuanjiankong"></span>
            <div class="name">
              资源监控
            </div>
            <div class="code-name">.icon-ziyuanjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lingcunwei"></span>
            <div class="name">
              另存为
            </div>
            <div class="code-name">.icon-lingcunwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochuexcel"></span>
            <div class="name">
              导出excel
            </div>
            <div class="code-name">.icon-daochuexcel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu"></span>
            <div class="name">
              导出/输入
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan"></span>
            <div class="name">
              固件升级
            </div>
            <div class="code-name">.icon-ziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanlianduankai"></span>
            <div class="name">
              关联断开
            </div>
            <div class="code-name">.icon-guanlianduankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ceshi"></span>
            <div class="name">
              测试
            </div>
            <div class="code-name">.icon-ceshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengxin"></span>
            <div class="name">
              更新
            </div>
            <div class="code-name">.icon-gengxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhenduan"></span>
            <div class="name">
              诊断
            </div>
            <div class="code-name">.icon-zhenduan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-B"></span>
            <div class="name">
              云下载
            </div>
            <div class="code-name">.icon-B
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-B1"></span>
            <div class="name">
              连接
            </div>
            <div class="code-name">.icon-B1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbiwenjianjia"></span>
            <div class="name">
              关闭文件夹
            </div>
            <div class="code-name">.icon-guanbiwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengxin1"></span>
            <div class="name">
              更新
            </div>
            <div class="code-name">.icon-gengxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-version"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.icon-version
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_"></span>
            <div class="name">
              number_6
            </div>
            <div class="code-name">.icon-number_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_1"></span>
            <div class="name">
              number_7
            </div>
            <div class="code-name">.icon-number_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_2"></span>
            <div class="name">
              number_9
            </div>
            <div class="code-name">.icon-number_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_3"></span>
            <div class="name">
              number_0
            </div>
            <div class="code-name">.icon-number_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_4"></span>
            <div class="name">
              number_3
            </div>
            <div class="code-name">.icon-number_4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_5"></span>
            <div class="name">
              number_1
            </div>
            <div class="code-name">.icon-number_5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_6"></span>
            <div class="name">
              number_4
            </div>
            <div class="code-name">.icon-number_6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_7"></span>
            <div class="name">
              number_8
            </div>
            <div class="code-name">.icon-number_7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_punctuation"></span>
            <div class="name">
              number_punctuation
            </div>
            <div class="code-name">.icon-number_punctuation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_8"></span>
            <div class="name">
              number_5
            </div>
            <div class="code-name">.icon-number_8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-number_9"></span>
            <div class="name">
              number_2
            </div>
            <div class="code-name">.icon-number_9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-r"></span>
            <div class="name">
              add-r
            </div>
            <div class="code-name">.icon-add-r
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-s"></span>
            <div class="name">
              add-s
            </div>
            <div class="code-name">.icon-add-s
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ascending"></span>
            <div class="name">
              ascending
            </div>
            <div class="code-name">.icon-ascending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-air"></span>
            <div class="name">
              air
            </div>
            <div class="code-name">.icon-air
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-building"></span>
            <div class="name">
              building
            </div>
            <div class="code-name">.icon-building
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Chinese"></span>
            <div class="name">
              Chinese
            </div>
            <div class="code-name">.icon-Chinese
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-descending"></span>
            <div class="name">
              descending
            </div>
            <div class="code-name">.icon-descending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-English"></span>
            <div class="name">
              English
            </div>
            <div class="code-name">.icon-English
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exit-fullscreen"></span>
            <div class="name">
              exit-fullscreen
            </div>
            <div class="code-name">.icon-exit-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fullscreen"></span>
            <div class="name">
              fullscreen
            </div>
            <div class="code-name">.icon-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lefy-exchange"></span>
            <div class="name">
              lefy-exchange
            </div>
            <div class="code-name">.icon-lefy-exchange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right-exchange"></span>
            <div class="name">
              right-exchange
            </div>
            <div class="code-name">.icon-right-exchange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-view-list"></span>
            <div class="name">
              view-list
            </div>
            <div class="code-name">.icon-view-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-view-matrix"></span>
            <div class="name">
              view-matrix
            </div>
            <div class="code-name">.icon-view-matrix
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-word"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.icon-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diamond-o"></span>
            <div class="name">
              diamond-o
            </div>
            <div class="code-name">.icon-diamond-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dollar-o"></span>
            <div class="name">
              dollar-o
            </div>
            <div class="code-name">.icon-dollar-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuanshu1"></span>
            <div class="name">
              传输
            </div>
            <div class="code-name">.icon-chuanshu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yidongyunkongzhitaiicon42"></span>
            <div class="name">
              云数据库
            </div>
            <div class="code-name">.icon-yidongyunkongzhitaiicon42
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dataBase"></span>
            <div class="name">
              数据库
            </div>
            <div class="code-name">.icon-dataBase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fpgayunfuwuqi"></span>
            <div class="name">
              fpga云服务器
            </div>
            <div class="code-name">.icon-fpgayunfuwuqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Redisshujuku"></span>
            <div class="name">
              Redis 数据库
            </div>
            <div class="code-name">.icon-Redisshujuku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuanshu"></span>
            <div class="name">
              传输
            </div>
            <div class="code-name">.icon-chuanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixian2"></span>
            <div class="name">
              在线
            </div>
            <div class="code-name">.icon-zaixian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeileibanqiulixian"></span>
            <div class="name">
              设备类_半球离线
            </div>
            <div class="code-name">.icon-shebeileibanqiulixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lixian"></span>
            <div class="name">
              离线
            </div>
            <div class="code-name">.icon-lixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangmu3"></span>
            <div class="name">
              项目1
            </div>
            <div class="code-name">.icon-xiangmu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lixian1"></span>
            <div class="name">
              离线
            </div>
            <div class="code-name">.icon-lixian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaoxiangmu"></span>
            <div class="name">
              列表项目
            </div>
            <div class="code-name">.icon-liebiaoxiangmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixian1"></span>
            <div class="name">
              在线
            </div>
            <div class="code-name">.icon-zaixian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixian"></span>
            <div class="name">
              在线
            </div>
            <div class="code-name">.icon-zaixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ITshenqing"></span>
            <div class="name">
              电脑申请
            </div>
            <div class="code-name">.icon-ITshenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconx"></span>
            <div class="name">
              用户离线
            </div>
            <div class="code-name">.icon-iconx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone"></span>
            <div class="name">
              手机电话
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-msnui-state-poweron"></span>
            <div class="name">
              状态-开机
            </div>
            <div class="code-name">.icon-msnui-state-poweron
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huishou"></span>
            <div class="name">
              回收
            </div>
            <div class="code-name">.icon-huishou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianjiwancheng"></span>
            <div class="name">
              编辑完成
            </div>
            <div class="code-name">.icon-bianjiwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyepin"></span>
            <div class="name">
              工业品
            </div>
            <div class="code-name">.icon-gongyepin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-monitor"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-monitor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gprs"></span>
            <div class="name">
              GPRS
            </div>
            <div class="code-name">.icon-gprs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxian"></span>
            <div class="name">
              曲线
            </div>
            <div class="code-name">.icon-quxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wxbbaobiao"></span>
            <div class="name">
              wxb报表
            </div>
            <div class="code-name">.icon-wxbbaobiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wxbgongju"></span>
            <div class="name">
              wxb工具
            </div>
            <div class="code-name">.icon-wxbgongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wxbzhuye"></span>
            <div class="name">
              wxb主页
            </div>
            <div class="code-name">.icon-wxbzhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontdizhixiugai"></span>
            <div class="name">
              iconfont-xiugai
            </div>
            <div class="code-name">.icon-iconfontdizhixiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaiji"></span>
            <div class="name">
              开机
            </div>
            <div class="code-name">.icon-kaiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontyouhuiquan"></span>
            <div class="name">
              iconfont-youhuiquan
            </div>
            <div class="code-name">.icon-iconfontyouhuiquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontxingxing"></span>
            <div class="name">
              iconfont-xingxing
            </div>
            <div class="code-name">.icon-iconfontxingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-iconfontmingpian"></span>
            <div class="name">
              iconfont-mingpian
            </div>
            <div class="code-name">.icon-iconfontmingpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongye"></span>
            <div class="name">
              工业
            </div>
            <div class="code-name">.icon-gongye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianji"></span>
            <div class="name">
              电机
            </div>
            <div class="code-name">.icon-dianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jidianjiancha"></span>
            <div class="name">
              机电检查
            </div>
            <div class="code-name">.icon-jidianjiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowdown"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrowdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowleft"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.icon-arrowleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowright"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrowright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowup"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.icon-arrowup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorite"></span>
            <div class="name">
              favorite
            </div>
            <div class="code-name">.icon-favorite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-good"></span>
            <div class="name">
              good
            </div>
            <div class="code-name">.icon-good
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-account"></span>
            <div class="name">
              account
            </div>
            <div class="code-name">.icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-up"></span>
            <div class="name">
              up
            </div>
            <div class="code-name">.icon-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.icon-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cry"></span>
            <div class="name">
              cry
            </div>
            <div class="code-name">.icon-cry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skip"></span>
            <div class="name">
              skip
            </div>
            <div class="code-name">.icon-skip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attachment"></span>
            <div class="name">
              attachment
            </div>
            <div class="code-name">.icon-attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-browse"></span>
            <div class="name">
              browse
            </div>
            <div class="code-name">.icon-browse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">.icon-bad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima1688"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima1688
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongye1"></span>
            <div class="name">
              工业
            </div>
            <div class="code-name">.icon-gongye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhang"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ok"></span>
            <div class="name">
              ok
            </div>
            <div class="code-name">.icon-ok
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangmu"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-xiangmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huishou1"></span>
            <div class="name">
              回收
            </div>
            <div class="code-name">.icon-huishou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtai-chenggong"></span>
            <div class="name">
              状态-成功
            </div>
            <div class="code-name">.icon-zhuangtai-chenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtai-jinggao"></span>
            <div class="name">
              状态-警告
            </div>
            <div class="code-name">.icon-zhuangtai-jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhang1"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ok1"></span>
            <div class="name">
              ok
            </div>
            <div class="code-name">.icon-ok1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huishou2"></span>
            <div class="name">
              回收
            </div>
            <div class="code-name">.icon-huishou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianji1"></span>
            <div class="name">
              电机
            </div>
            <div class="code-name">.icon-dianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianjiwancheng1"></span>
            <div class="name">
              编辑完成
            </div>
            <div class="code-name">.icon-bianjiwancheng1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangmu1"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-xiangmu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxian1"></span>
            <div class="name">
              曲线
            </div>
            <div class="code-name">.icon-quxian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxian2"></span>
            <div class="name">
              曲线
            </div>
            <div class="code-name">.icon-quxian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong1"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtai-jujue"></span>
            <div class="name">
              状态-拒绝
            </div>
            <div class="code-name">.icon-zhuangtai-jujue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong2"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo1"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gprs1"></span>
            <div class="name">
              gprs
            </div>
            <div class="code-name">.icon-gprs1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fl-jia"></span>
            <div class="name">
              家
            </div>
            <div class="code-name">.icon-fl-jia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaiji1"></span>
            <div class="name">
              开机
            </div>
            <div class="code-name">.icon-kaiji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi"></span>
            <div class="name">
              停止
            </div>
            <div class="code-name">.icon-tingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiating"></span>
            <div class="name">
              家庭
            </div>
            <div class="code-name">.icon-jiating
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanye"></span>
            <div class="name">
              翻页
            </div>
            <div class="code-name">.icon-fanye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangmu2"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-xiangmu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhang2"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji2"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo2"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong3"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fon10"></span>
            <div class="name">
              翻页
            </div>
            <div class="code-name">.icon-fon10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo3"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi1"></span>
            <div class="name">
              停止2
            </div>
            <div class="code-name">.icon-tingzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhang3"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi2"></span>
            <div class="name">
              停止2
            </div>
            <div class="code-name">.icon-tingzhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtai"></span>
            <div class="name">
              状态
            </div>
            <div class="code-name">.icon-zhuangtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ok2"></span>
            <div class="name">
              ok (1)
            </div>
            <div class="code-name">.icon-ok2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtai1"></span>
            <div class="name">
              状态
            </div>
            <div class="code-name">.icon-zhuangtai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiankong4"></span>
            <div class="name">
              监控
            </div>
            <div class="code-name">.icon-jiankong4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanye-shangye"></span>
            <div class="name">
              翻页-上页
            </div>
            <div class="code-name">.icon-fanye-shangye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanye-xiaye"></span>
            <div class="name">
              翻页-下页
            </div>
            <div class="code-name">.icon-fanye-xiaye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianshijikaiguan"></span>
            <div class="name">
              电视机开关
            </div>
            <div class="code-name">.icon-dianshijikaiguan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banbengengxin"></use>
                </svg>
                <div class="name">版本更新</div>
                <div class="code-name">#icon-banbengengxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibiaoti35"></use>
                </svg>
                <div class="name">产品</div>
                <div class="code-name">#icon-weibiaoti35</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuliebiao"></use>
                </svg>
                <div class="name">树型</div>
                <div class="code-name">#icon-shuliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yetaishu"></use>
                </svg>
                <div class="name">业态树</div>
                <div class="code-name">#icon-yetaishu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yun"></use>
                </svg>
                <div class="name">云</div>
                <div class="code-name">#icon-yun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengjigonggao"></use>
                </svg>
                <div class="name">升级公告</div>
                <div class="code-name">#icon-shengjigonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji-copy"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunshangchuan"></use>
                </svg>
                <div class="name">云上传</div>
                <div class="code-name">#icon-yunshangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangluoxitong"></use>
                </svg>
                <div class="name">网络系统</div>
                <div class="code-name">#icon-wangluoxitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochutupian"></use>
                </svg>
                <div class="name">导出图片</div>
                <div class="code-name">#icon-daochutupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dakaiwenjian"></use>
                </svg>
                <div class="name">打开文件</div>
                <div class="code-name">#icon-dakaiwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuanjiankong"></use>
                </svg>
                <div class="name">资源监控</div>
                <div class="code-name">#icon-ziyuanjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lingcunwei"></use>
                </svg>
                <div class="name">另存为</div>
                <div class="code-name">#icon-lingcunwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochuexcel"></use>
                </svg>
                <div class="name">导出excel</div>
                <div class="code-name">#icon-daochuexcel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出/输入</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan"></use>
                </svg>
                <div class="name">固件升级</div>
                <div class="code-name">#icon-ziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanlianduankai"></use>
                </svg>
                <div class="name">关联断开</div>
                <div class="code-name">#icon-guanlianduankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ceshi"></use>
                </svg>
                <div class="name">测试</div>
                <div class="code-name">#icon-ceshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengxin"></use>
                </svg>
                <div class="name">更新</div>
                <div class="code-name">#icon-gengxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhenduan"></use>
                </svg>
                <div class="name">诊断</div>
                <div class="code-name">#icon-zhenduan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-B"></use>
                </svg>
                <div class="name">云下载</div>
                <div class="code-name">#icon-B</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-B1"></use>
                </svg>
                <div class="name">连接</div>
                <div class="code-name">#icon-B1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbiwenjianjia"></use>
                </svg>
                <div class="name">关闭文件夹</div>
                <div class="code-name">#icon-guanbiwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengxin1"></use>
                </svg>
                <div class="name">更新</div>
                <div class="code-name">#icon-gengxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-version"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#icon-version</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_"></use>
                </svg>
                <div class="name">number_6</div>
                <div class="code-name">#icon-number_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_1"></use>
                </svg>
                <div class="name">number_7</div>
                <div class="code-name">#icon-number_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_2"></use>
                </svg>
                <div class="name">number_9</div>
                <div class="code-name">#icon-number_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_3"></use>
                </svg>
                <div class="name">number_0</div>
                <div class="code-name">#icon-number_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_4"></use>
                </svg>
                <div class="name">number_3</div>
                <div class="code-name">#icon-number_4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_5"></use>
                </svg>
                <div class="name">number_1</div>
                <div class="code-name">#icon-number_5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_6"></use>
                </svg>
                <div class="name">number_4</div>
                <div class="code-name">#icon-number_6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_7"></use>
                </svg>
                <div class="name">number_8</div>
                <div class="code-name">#icon-number_7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_punctuation"></use>
                </svg>
                <div class="name">number_punctuation</div>
                <div class="code-name">#icon-number_punctuation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_8"></use>
                </svg>
                <div class="name">number_5</div>
                <div class="code-name">#icon-number_8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-number_9"></use>
                </svg>
                <div class="name">number_2</div>
                <div class="code-name">#icon-number_9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-r"></use>
                </svg>
                <div class="name">add-r</div>
                <div class="code-name">#icon-add-r</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-s"></use>
                </svg>
                <div class="name">add-s</div>
                <div class="code-name">#icon-add-s</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ascending"></use>
                </svg>
                <div class="name">ascending</div>
                <div class="code-name">#icon-ascending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-air"></use>
                </svg>
                <div class="name">air</div>
                <div class="code-name">#icon-air</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-building"></use>
                </svg>
                <div class="name">building</div>
                <div class="code-name">#icon-building</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Chinese"></use>
                </svg>
                <div class="name">Chinese</div>
                <div class="code-name">#icon-Chinese</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-descending"></use>
                </svg>
                <div class="name">descending</div>
                <div class="code-name">#icon-descending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-English"></use>
                </svg>
                <div class="name">English</div>
                <div class="code-name">#icon-English</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exit-fullscreen"></use>
                </svg>
                <div class="name">exit-fullscreen</div>
                <div class="code-name">#icon-exit-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fullscreen"></use>
                </svg>
                <div class="name">fullscreen</div>
                <div class="code-name">#icon-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lefy-exchange"></use>
                </svg>
                <div class="name">lefy-exchange</div>
                <div class="code-name">#icon-lefy-exchange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-exchange"></use>
                </svg>
                <div class="name">right-exchange</div>
                <div class="code-name">#icon-right-exchange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-view-list"></use>
                </svg>
                <div class="name">view-list</div>
                <div class="code-name">#icon-view-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-view-matrix"></use>
                </svg>
                <div class="name">view-matrix</div>
                <div class="code-name">#icon-view-matrix</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-word"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#icon-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diamond-o"></use>
                </svg>
                <div class="name">diamond-o</div>
                <div class="code-name">#icon-diamond-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dollar-o"></use>
                </svg>
                <div class="name">dollar-o</div>
                <div class="code-name">#icon-dollar-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuanshu1"></use>
                </svg>
                <div class="name">传输</div>
                <div class="code-name">#icon-chuanshu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidongyunkongzhitaiicon42"></use>
                </svg>
                <div class="name">云数据库</div>
                <div class="code-name">#icon-yidongyunkongzhitaiicon42</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dataBase"></use>
                </svg>
                <div class="name">数据库</div>
                <div class="code-name">#icon-dataBase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fpgayunfuwuqi"></use>
                </svg>
                <div class="name">fpga云服务器</div>
                <div class="code-name">#icon-fpgayunfuwuqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Redisshujuku"></use>
                </svg>
                <div class="name">Redis 数据库</div>
                <div class="code-name">#icon-Redisshujuku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuanshu"></use>
                </svg>
                <div class="name">传输</div>
                <div class="code-name">#icon-chuanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixian2"></use>
                </svg>
                <div class="name">在线</div>
                <div class="code-name">#icon-zaixian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeileibanqiulixian"></use>
                </svg>
                <div class="name">设备类_半球离线</div>
                <div class="code-name">#icon-shebeileibanqiulixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixian"></use>
                </svg>
                <div class="name">离线</div>
                <div class="code-name">#icon-lixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu3"></use>
                </svg>
                <div class="name">项目1</div>
                <div class="code-name">#icon-xiangmu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixian1"></use>
                </svg>
                <div class="name">离线</div>
                <div class="code-name">#icon-lixian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaoxiangmu"></use>
                </svg>
                <div class="name">列表项目</div>
                <div class="code-name">#icon-liebiaoxiangmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixian1"></use>
                </svg>
                <div class="name">在线</div>
                <div class="code-name">#icon-zaixian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixian"></use>
                </svg>
                <div class="name">在线</div>
                <div class="code-name">#icon-zaixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ITshenqing"></use>
                </svg>
                <div class="name">电脑申请</div>
                <div class="code-name">#icon-ITshenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconx"></use>
                </svg>
                <div class="name">用户离线</div>
                <div class="code-name">#icon-iconx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="name">手机电话</div>
                <div class="code-name">#icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-msnui-state-poweron"></use>
                </svg>
                <div class="name">状态-开机</div>
                <div class="code-name">#icon-msnui-state-poweron</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huishou"></use>
                </svg>
                <div class="name">回收</div>
                <div class="code-name">#icon-huishou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianjiwancheng"></use>
                </svg>
                <div class="name">编辑完成</div>
                <div class="code-name">#icon-bianjiwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyepin"></use>
                </svg>
                <div class="name">工业品</div>
                <div class="code-name">#icon-gongyepin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-monitor"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-monitor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gprs"></use>
                </svg>
                <div class="name">GPRS</div>
                <div class="code-name">#icon-gprs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxian"></use>
                </svg>
                <div class="name">曲线</div>
                <div class="code-name">#icon-quxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wxbbaobiao"></use>
                </svg>
                <div class="name">wxb报表</div>
                <div class="code-name">#icon-wxbbaobiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wxbgongju"></use>
                </svg>
                <div class="name">wxb工具</div>
                <div class="code-name">#icon-wxbgongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wxbzhuye"></use>
                </svg>
                <div class="name">wxb主页</div>
                <div class="code-name">#icon-wxbzhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontdizhixiugai"></use>
                </svg>
                <div class="name">iconfont-xiugai</div>
                <div class="code-name">#icon-iconfontdizhixiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaiji"></use>
                </svg>
                <div class="name">开机</div>
                <div class="code-name">#icon-kaiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontyouhuiquan"></use>
                </svg>
                <div class="name">iconfont-youhuiquan</div>
                <div class="code-name">#icon-iconfontyouhuiquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontxingxing"></use>
                </svg>
                <div class="name">iconfont-xingxing</div>
                <div class="code-name">#icon-iconfontxingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconfontmingpian"></use>
                </svg>
                <div class="name">iconfont-mingpian</div>
                <div class="code-name">#icon-iconfontmingpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongye"></use>
                </svg>
                <div class="name">工业</div>
                <div class="code-name">#icon-gongye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianji"></use>
                </svg>
                <div class="name">电机</div>
                <div class="code-name">#icon-dianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jidianjiancha"></use>
                </svg>
                <div class="name">机电检查</div>
                <div class="code-name">#icon-jidianjiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowdown"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrowdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowleft"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#icon-arrowleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowright"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrowright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowup"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#icon-arrowup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorite"></use>
                </svg>
                <div class="name">favorite</div>
                <div class="code-name">#icon-favorite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-good"></use>
                </svg>
                <div class="name">good</div>
                <div class="code-name">#icon-good</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-account"></use>
                </svg>
                <div class="name">account</div>
                <div class="code-name">#icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up"></use>
                </svg>
                <div class="name">up</div>
                <div class="code-name">#icon-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#icon-success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#icon-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cry"></use>
                </svg>
                <div class="name">cry</div>
                <div class="code-name">#icon-cry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#icon-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skip"></use>
                </svg>
                <div class="name">skip</div>
                <div class="code-name">#icon-skip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attachment"></use>
                </svg>
                <div class="name">attachment</div>
                <div class="code-name">#icon-attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-browse"></use>
                </svg>
                <div class="name">browse</div>
                <div class="code-name">#icon-browse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bad"></use>
                </svg>
                <div class="name">bad</div>
                <div class="code-name">#icon-bad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima1688"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima1688</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongye1"></use>
                </svg>
                <div class="name">工业</div>
                <div class="code-name">#icon-gongye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ok"></use>
                </svg>
                <div class="name">ok</div>
                <div class="code-name">#icon-ok</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-xiangmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huishou1"></use>
                </svg>
                <div class="name">回收</div>
                <div class="code-name">#icon-huishou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtai-chenggong"></use>
                </svg>
                <div class="name">状态-成功</div>
                <div class="code-name">#icon-zhuangtai-chenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtai-jinggao"></use>
                </svg>
                <div class="name">状态-警告</div>
                <div class="code-name">#icon-zhuangtai-jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang1"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ok1"></use>
                </svg>
                <div class="name">ok</div>
                <div class="code-name">#icon-ok1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huishou2"></use>
                </svg>
                <div class="name">回收</div>
                <div class="code-name">#icon-huishou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianji1"></use>
                </svg>
                <div class="name">电机</div>
                <div class="code-name">#icon-dianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianjiwancheng1"></use>
                </svg>
                <div class="name">编辑完成</div>
                <div class="code-name">#icon-bianjiwancheng1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu1"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-xiangmu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxian1"></use>
                </svg>
                <div class="name">曲线</div>
                <div class="code-name">#icon-quxian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxian2"></use>
                </svg>
                <div class="name">曲线</div>
                <div class="code-name">#icon-quxian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong1"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtai-jujue"></use>
                </svg>
                <div class="name">状态-拒绝</div>
                <div class="code-name">#icon-zhuangtai-jujue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong2"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo1"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gprs1"></use>
                </svg>
                <div class="name">gprs</div>
                <div class="code-name">#icon-gprs1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fl-jia"></use>
                </svg>
                <div class="name">家</div>
                <div class="code-name">#icon-fl-jia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaiji1"></use>
                </svg>
                <div class="name">开机</div>
                <div class="code-name">#icon-kaiji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi"></use>
                </svg>
                <div class="name">停止</div>
                <div class="code-name">#icon-tingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiating"></use>
                </svg>
                <div class="name">家庭</div>
                <div class="code-name">#icon-jiating</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanye"></use>
                </svg>
                <div class="name">翻页</div>
                <div class="code-name">#icon-fanye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmu2"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-xiangmu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang2"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji2"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo2"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong3"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fon10"></use>
                </svg>
                <div class="name">翻页</div>
                <div class="code-name">#icon-fon10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo3"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi1"></use>
                </svg>
                <div class="name">停止2</div>
                <div class="code-name">#icon-tingzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang3"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi2"></use>
                </svg>
                <div class="name">停止2</div>
                <div class="code-name">#icon-tingzhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtai"></use>
                </svg>
                <div class="name">状态</div>
                <div class="code-name">#icon-zhuangtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ok2"></use>
                </svg>
                <div class="name">ok (1)</div>
                <div class="code-name">#icon-ok2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtai1"></use>
                </svg>
                <div class="name">状态</div>
                <div class="code-name">#icon-zhuangtai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiankong4"></use>
                </svg>
                <div class="name">监控</div>
                <div class="code-name">#icon-jiankong4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanye-shangye"></use>
                </svg>
                <div class="name">翻页-上页</div>
                <div class="code-name">#icon-fanye-shangye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanye-xiaye"></use>
                </svg>
                <div class="name">翻页-下页</div>
                <div class="code-name">#icon-fanye-xiaye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianshijikaiguan"></use>
                </svg>
                <div class="name">电视机开关</div>
                <div class="code-name">#icon-dianshijikaiguan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
